<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src="main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
            <div class="one_1">
                    <h3>添加</h3>
                </div>
                <div class="one_2 form-inline">
                    <label>
                        id:
                        <input type="text" v-model="id">
                    </label>
                    <label>
                        name:
                        <input type="text" v-model="name">
                    </label>
                    <label>
                        <input type="button" value="添加" class="btn btn-primary" @click="add()">
                    </label>
                </div>
        <p v-cloak v-if="seen">------{{message1}}-------</p>
        <!-- 使用 v-cloak 能够解决 插值表达式闪烁问题-->

        <h4 v-text="message2">=========</h4>
        <!-- 默认 v-text 是没有闪烁问题的 -->
        <!-- v-text会覆盖元素原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空 -->

        <div v-html="message3">=========</div><!-- v-html 可以使数据中的html元素也有效，但也会覆盖元素原本的内容 -->

        <input type="button" value="点我出奇迹" v-bind:title="mytitle" v-on:click="show">
        <!-- v-bind: 是 vue中，提供的用于绑定属性的指令，只能进行单向绑定，从一个到另一个，无法实现数据的双向绑定,缩写是 :-->
        <!-- Vue 中提供了 v-on: 事件绑定机制,click是点击事件，mouseover是鼠标覆盖事件,缩写是 @-->

        <input type="text" style="width:100%" v-model="message1">
        <!-- v-model只能运用在表单元素中 
            如 input(radio, text, address, email....) select checkout textarea 这些常见的表单元素-->
        <p>{{text1}}</p>
        <input type="text" v-model="text1" style="width:50%">

        <p v-for="item in list" :key="item.id">
            id是:{{item.id}}
            name是:{{item.name}}
        </p>
    </div>


    <script>
        var app = new Vue({
            el: '#app',
            data: {
                id:'',
                name:'',
                message1: '这是往往开发的第一行vue代码!',
                message2: '这是往往开发的第二行vue代码!',
                message3: '<h1>我是h1，我大我骄傲！！！</h1>',
                mytitle: '这是一个自己定义的title',
                seen: true,
                text1: '这是:',
                list: [
                    { id: 1, name: 'www' },
                    { id: 2, name: '23232' }
                ]
            },
            methods: {
                show() {
                    alert('Hello')
                }
            }
        })
    </script>
</body>

</html>